// 添加题库
<template>
	<div class="add">
		<section class="append">
			<ul>
				<li>
          <el-input disabled="" v-model="courseName" placeholder="所属课程" style="width: 200px;"></el-input>
          <el-select v-model="courseId" placeholder="请选择课程" @change="getCourseName(courseId)">
            <el-option v-for="(item,index) in course" :key="item+index" :label="item.courseId" :value="item.courseId"></el-option>
          </el-select>
          <el-select v-model="optionValue" placeholder="请选择题型" class="w150">
          	<el-option v-for="(item,index) in options" :key="item+index" :label="item.label" :value="item.label"></el-option>
          </el-select>
				</li>
				<li v-if="optionValue == '单选题'">
					<el-select v-model="form2.chooseLevel" placeholder="难度" class="w150">
					  <el-option v-for="(item,index) in optionl" :key="item+index" :label="item.text" :value="item.id"></el-option>
					</el-select>
				</li>
        <li v-if="optionValue == '多选题'">
        	<el-select v-model="form2.chooseLevel" placeholder="难度" class="w150">
        	  <el-option v-for="(item,index) in optionl" :key="item+index" :label="item.text" :value="item.id"></el-option>
        	</el-select>
        </li>
				<li v-if="optionValue == '填空题'">
					<el-select v-model="form1.topicLevel" placeholder="难度" class="w150">
					  <el-option v-for="(item,index) in optionl" :key="item+index" :label="item.text" :value="item.id"></el-option>
					</el-select>
				</li>
				<li v-if="optionValue == '判断题'">
					<el-select v-model="form1.topicLevel" placeholder="难度" class="w150">
					  <el-option v-for="(item,index) in optionl" :key="item+index" :label="item.text" :value="item.id"></el-option>
					</el-select>
				</li>
				<li v-if="optionValue == '综合题'">
					<el-select v-model="form1.topicLevel" placeholder="难度" class="w150">
					  <el-option v-for="(item,index) in optionl" :key="item+index" :label="item.text" :value="item.id"></el-option>
					</el-select>
				</li>

				<li v-if="optionValue == '单选题'">
					<el-input v-model="form2.chooseScore" placeholder="试题分数" class="w150" clearable></el-input>
				</li>
        <li v-if="optionValue == '多选题'">
        	<el-input v-model="form2.chooseScore" placeholder="试题分数" class="w150" clearable></el-input>
        </li>
				<li v-if="optionValue == '判断题'">
					<el-input v-model="form1.topicScore" placeholder="试题分数" class="w150" clearable></el-input>
				</li>
				<li v-if="optionValue == '填空题'">
					<el-input v-model="form1.topicScore" placeholder="试题分数" class="w150" clearable></el-input>
				</li>
				<li v-if="optionValue == '综合题'">
					<el-input v-model="form1.topicScore" placeholder="试题分数" class="w150" clearable></el-input>
				</li>

				<li v-if="optionValue == '单选题'">
					<el-select v-model="form2.chooseRight" placeholder="选择正确答案" class="w150">
						<el-option v-for="(item,index) in rights" :key="item+index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</li>
        <li v-if="optionValue == '多选题'">
        	  <div>
        	    <el-checkbox-group v-model="checkbox" size="medium">
        	      <el-checkbox-button v-for="item in morerights" :label="item" :key="item"></el-checkbox-button>
        	    </el-checkbox-group>
        	  </div>
        </li>
			</ul>

			<div class="change" v-if="optionValue == '单选题'">
				<div class="title">
					<el-tag>题目:</el-tag><span>在下面的输入框中输入题目,形如--DNS 服务器和DHCP服务器的作用是（）</span>
					<el-input v-model="form2.chooseName" type="textarea" rows="4" placeholder="请输入题目内容" resize="none" class="answer"></el-input>
				</div>
				<div class="options">
					<ul>
						<li>
							<el-tag type="success">A</el-tag>
							<el-input v-model="form2.chooseA" placeholder="请输入选项A的内容" clearable=""></el-input>
						</li>
						<li>
							<el-tag type="success">B</el-tag>
							<el-input v-model="form2.chooseB" placeholder="请输入选项B的内容" clearable=""></el-input>
						</li>
						<li>
							<el-tag type="success">C</el-tag>
							<el-input v-model="form2.chooseC" placeholder="请输入选项C的内容" clearable=""></el-input>
						</li>
						<li>
							<el-tag type="success">D</el-tag>
							<el-input v-model="form2.chooseD" placeholder="请输入选项D的内容" clearable=""></el-input>
						</li>
					</ul>
				</div>
				<div class="title">
					<el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
					<el-input v-model="form2.analysis" type="textarea" rows="4" placeholder="请输入答案解析" resize="none" class="answer"></el-input>
				</div>
				<div class="submit">
					<el-button type="primary" @click="addsingle">立即添加</el-button>
				</div>
			</div>

      <div class="change" v-if="optionValue == '多选题'">
      	<div class="title">
      		<el-tag>题目:</el-tag><span>在下面的输入框中输入题目,形如--DNS 服务器和DHCP服务器的作用是（）</span>
      		<el-input v-model="form2.chooseName" type="textarea" rows="4" placeholder="请输入题目内容" resize="none" class="answer"></el-input>
      	</div>
      	<div class="options">
      		<ul>
      			<li>
      				<el-tag type="success">A</el-tag>
      				<el-input v-model="form2.chooseA" placeholder="请输入选项A的内容" clearable=""></el-input>
      			</li>
      			<li>
      				<el-tag type="success">B</el-tag>
      				<el-input v-model="form2.chooseB" placeholder="请输入选项B的内容" clearable=""></el-input>
      			</li>
      			<li>
      				<el-tag type="success">C</el-tag>
      				<el-input v-model="form2.chooseC" placeholder="请输入选项C的内容" clearable=""></el-input>
      			</li>
      			<li>
      				<el-tag type="success">D</el-tag>
      				<el-input v-model="form2.chooseD" placeholder="请输入选项D的内容" clearable=""></el-input>
      			</li>
      		</ul>
      	</div>
      	<div class="title">
      		<el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
      		<el-input v-model="form2.analysis" type="textarea" rows="4" placeholder="请输入答案解析" resize="none" class="answer"></el-input>
      	</div>
      	<div class="submit">
      		<el-button type="primary" @click="addmult">立即添加</el-button>
      	</div>
      </div>

			<div class="change fill" v-if="optionValue == '填空题'">
				<div class="title">
					<el-tag>题目:</el-tag><span>输入题目,形如--从计算机网络系统组成的角度看，计算机网络可以分为()和()。注意需要考生答题部分一定要用括号（英文半角）括起来。</span>
					<el-input v-model="form1.topicName" type="textarea" rows="4" placeholder="请输入题目内容" resize="none" class="answer"></el-input>
				</div>
				<div class="fillAnswer">
					<el-tag>正确答案:</el-tag>
					<el-input v-model="form1.topicAnswer"></el-input>
				</div>
				<div class="title analysis">
					<el-tag type="success">解析:</el-tag><span>下方输入框中输入答案解析</span>
					<el-input v-model="form1.analysis" type="textarea" rows="4" placeholder="请输入答案解析" resize="none" class="answer"></el-input>
				</div>
				<div class="submit">
					<el-button type="primary" @click="addinsert">立即添加</el-button>
				</div>
			</div>

			<div class="change judge" v-if="optionValue == '判断题'">
				<div class="title">
					<el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
					<el-input v-model="form1.topicName" type="textarea" rows="4" placeholder="请输入题目内容" resize="none" class="answer"></el-input>
				</div>
				<div class="judgeAnswer">
					<el-radio v-model="form1.topicAnswer" label="T">正确</el-radio>
					<el-radio v-model="form1.topicAnswer" label="F">错误</el-radio>
				</div>
				<div class="title">
					<el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
					<el-input v-model="form1.analysis" type="textarea" rows="4" placeholder="请输入答案解析" resize="none" class="answer"></el-input>
				</div>
				<div class="submit">
					<el-button type="primary" @click="addjudege">立即添加</el-button>
				</div>
			</div>

			<div class="change fill" v-if="optionValue == '综合题'">
				<div class="title">
					<el-tag>题目:</el-tag><span>输入题目,形如--从计算机网络系统组成的角度看，计算机网络可以分为()和()。注意需要考生答题部分一定要用括号（英文半角）括起来。</span>
					<el-input v-model="form1.topicName" type="textarea" rows="4" placeholder="请输入题目内容" resize="none" class="answer"></el-input>
				</div>
				<div class="fillAnswer">
					<el-tag>参考答案:</el-tag>
					<el-input v-model="form1.topicAnswer" type="textarea" rows="4" placeholder="请输入参考答案" resize="none" class="answer"></el-input>
				</div>
				<div class="title analysis">
					<el-tag type="success">解析:</el-tag><span>下方输入框中输入答案解析</span>
					<el-input v-model="form1.analysis" type="textarea" rows="4" placeholder="请输入答案解析" resize="none" class="answer"></el-input>
				</div>
				<div class="submit">
					<el-button type="primary" @click="addobject">立即添加</el-button>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        checkbox:[],
        optionValue:"单选题",
				options: [ //题库类型
					{value: '1',label: '单选题'},
          {value: '2',label: '多选题'},
					{value: '3',label: '填空题'},
					{value: '4',label: '判断题'},
					{value: '5',label: '综合题'}
				],
				optionl:[ //难度
				  {text:'简单',id:'1'},
				  {text:'一般',id:'2'},
				  {text:'困难',id:'3'}
				],
				rights: [ //单选答案
					{value: 'A',label: 'A'},
					{value: 'B',label: 'B'},
					{value: 'C',label: 'C'},
					{value: 'D',label: 'D'}
				],
        morerights: [
          'A','B','C','D'
        ],
        course:[
          {
            courseId:'请选择',
            courseName:'请选择',
          }
        ],
        form1: {
          topicId:'',
          topicName:'',
          topicAnswer:'',
          topicScore:0,
          topicLevel:'',
          topicType:'',
          analysis:'',
          course:{
            courseId:'',
            courseName:''
          }
        },
        form2: {
          chooseId:'',
          chooseName:'',
          chooseA:'',
          chooseB:'',
          chooseC:'',
          chooseD:'',
          chooseRight:'',
          chooseScore:0,
          chooseLevel:'',
          chooseType:'',
          analysis:'',
          course:{
            courseId:'',
            courseName:''
          }
        },
        courseId:'',
        courseName:''
			};
		},
    created() {
      this.getAllCourseId()
    },
		methods: {
			getCourseName(CourseId){  //根据课程编号获取课程名 ✔
			  this.$axios('/api/course/getCouById/'+CourseId).then(res => {
			    this.form1.course.courseName = res.data
          this.form2.course.courseName = res.data
          this.courseName = res.data
			  })
			},
			getAllCourseId(){ //获取所有课程编号 ✔
			  this.$axios('/api/course/getCouAll').then(res => {
           this.course = res.data
           console.log(this.course)
			  })
			},
      addsingle(){
        this.form2.chooseType = 1
        this.addTopicmult()
      },
      addmult(){
         for(let item of this.checkbox){
           this.form2.chooseRight = this.form2.chooseRight + item + ","
         }
         this.form2.course.courseId = this.courseId
         this.form2.course.courseName = this.courseName
         this.form2.chooseType = 2
         this.addTopicmult()
      },
      addinsert(){
        this.form1.topicType = 2
        this.addTopicsingle()
      },
      addjudege(){
        this.form1.topicType = 1
       this.addTopicsingle()
      },
      addobject(){
        this.form1.topicType = 3
        this.addTopicsingle()
      },
      addTopicsingle(){
        this.form1.course.courseId = this.courseId
        this.form1.course.courseName = this.courseName
        this.$axios({
          url: '/api/addTopicsingle',
          method: 'put',
          data: {
            ...this.form1
          }
        }).then(res => {
        	if (res.data == 1) {
        		this.$message({
        			message: '增加成功',
        			type: 'success'
        		})
        	}
        })
      },
      addTopicmult(){
        this.$axios({
          url: '/api/addTopicmult',
          method: 'put',
          data: {
            ...this.form2
          }
        }).then(res => {
        	if (res.data == 1) {
        		this.$message({
        			message: '增加成功',
        			type: 'success'
        		})
        	}
        })
      }
    }
	};
</script>

<style lang="scss" scoped>
	.add {
		margin: 0px 40px;

		.box {
			padding: 0px 20px;

			ul li {
				margin: 10px 0px;
				display: flex;
				align-items: center;

				.el-input {
					width: 6%;
				}

				.w150 {
					margin-left: 20px;
					width: 7%;
				}
			}
		}

		.el-icon-circle-plus {
			margin-right: 10px;
		}

		.icon-daoru-tianchong {
			margin-right: 10px;
		}

		.append {
			margin: 0px 20px;

			ul {
				display: flex;
				align-items: center;

				li {
					margin-right: 20px;
				}
			}

			.change {
				margin-top: 20px;
				padding: 20px 16px;
				background-color: #E7F6F6;
				border-radius: 4px;

				.title {
					padding-left: 6px;
					color: #2f4f4f;

					span:nth-child(1) {
						margin-right: 6px;
					}

					.answer {
						margin: 20px 0px 20px 8px;
					}

					.el-textarea {
						width: 98% !important;
					}
				}

				.options {
					ul {
						display: flex;
						flex-direction: column;
					}

					ul li {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 98%;
						margin: 10px 0px;

						span {
							margin-right: 20px;
						}
					}
				}

				.submit {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.fill {
				.fillAnswer {
					display: flex;
					justify-content: center;
					align-items: center;

					span {
						margin-right: 6px;
					}

					.el-input {
						width: 91% !important;
					}
				}

				.analysis {
					margin-top: 20px;
					margin-left: 5px;
				}
			}

			.judge {
				.judgeAnswer {
					margin-left: 20px;
					margin-bottom: 20px;
				}
			}

			.w150 {
				width: 150px;
			}

			li:nth-child(2) {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
